<template>
    <div style="display:flex;flex-direction:column;width:100%;margin-top:25px">
        <div style="margin-bottom:10px;background:#eee;line-height:40px;padding-left:5px">新增物料
          <p-button  @click="handleAdd" type="primary" style="margin-left:20px">新增</p-button>
        </div>
         <p-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :scroll='tableScroll'
            :columns="defColumns"
            :dataSource="addDtaSource"
            :pagination="addipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="addhandleTableChange">
          <template slot="remark" slot-scope="text, record">
            <a href="javascript:;" @click="addonDelete(record.id)">{{text}}</a>
          </template>
      </p-table>
      <div style="margin-bottom:10px;background:#eee;line-height:40px;padding-left:5px">退库物料
        <p-button  @click="introductionAdd" type="primary" style="margin-left:20px">新增</p-button>
      </div>
         <p-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :scroll='tableScroll'
            :columns="Columns"
            :dataSource="removeDataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
          <template slot="remark" slot-scope="text, record">
            <a href="javascript:;" @click="onDelete(record.id)">{{text}}</a>
          </template>
      </p-table>
       <!-- 新增弹窗 -->
        <newAddVied ref="newAddVied"  :typeNum="typeNum"  @getlist="getlist"></newAddVied>
    </div>
   
</template>

<script>
import newAddVied from "./newAddVied";
export default {
  components:{
    newAddVied,
  },
    data(){
        return {
          // 判断新增还是退库
          typeNum:'',
          addDtaSource:[],
          removeDataSource:[],
          newlist:[],
          removeDataSource:[],
          adddataSource:[],
            // 表头
        defColumns: [
          {
            title: "序号",
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align: 'center',
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'位号',
            align: 'center',
            dataIndex: 'ranking',
          },
          {
            title:'物料编码',
            align: 'center',
            dataIndex: 'mcode',
          },
          {
            title:'物料名称',
            align: 'center',
            dataIndex: 'mname',
          },
          {
            title:'物料类型',
            align: 'center',
            dataIndex: 'type',
          },
          {
            title:'库位',
            align: 'center',
            dataIndex: 'position',
          },
          {
            title:'新增数量',
            align: 'center',
            dataIndex: 'number',
          },
          {
            title:'操作',
            align: 'center',
            dataIndex: 'remark',
            scopedSlots: { customRender: "remark" },
          },
        ],
        Columns: [
          {
            title: "序号",
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align: 'center',
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'位号',
            align: 'center',
            dataIndex: 'ranking',
          },
          {
            title:'物料编码',
            align: 'center',
            dataIndex: 'mcode',
          },
          {
            title:'物料名称',
            align: 'center',
            dataIndex: 'mname',
          },
          {
            title:'物料类型',
            align: 'center',
            dataIndex: 'type',
          },
          {
            title:'库位',
            align: 'center',
            dataIndex: 'position',
          },
          {
            title:'退库数量',
            align: 'center',
            dataIndex: 'number',
          },
          {
            title:'操作',
            align: 'center',
            dataIndex: 'remark',
             scopedSlots: { customRender: "remark" },
            
          },
        ],
        /* 分页参数 */
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '50'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        addipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '50'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        }
        }
    },
    methods:{
      onDelete(key){
        console.log(this.removeDataSource)
        this.removeDataSource = this.removeDataSource.filter(item => item.id !== key);
      },
      addonDelete(key){
        console.log(this.addDtaSource)
        this.addDtaSource = this.addDtaSource.filter(item => item.id !== key);
      },
      handleAdd(){
        console.log(this.$refs.newAddVied)
        this.typeNum=1
        this.$refs.newAddVied.NewAdd=true
        this.$refs.newAddVied.destroyOnClose=true
      },
      introductionAdd(){
        console.log(this.$refs.newAddVied)
        this.typeNum=2
        this.$refs.newAddVied.NewAdd=true
        this.$refs.newAddVied.destroyOnClose=true
      },
      getlist(data){
        if(this.typeNum==1){
        this.addDtaSource.push(data)
      }else if(this.typeNum==2){
        this.removeDataSource.push(data)
      }
      },
      handleTableChange(data){
        this.ipagination=data
      },
       addhandleTableChange(data){
        tthis.addipagination=data
      }
      
    }
}
</script>